<template>
	<view class="page-container">
		<button @click="getWeather" class="weather-btn">获取今天天气预报</button>
		<view class="weather-card" v-if="weatherInfo">
			<view class="weather-detail">日期：{{ weatherInfo.ymd }}</view>
			<view class="weather-detail">星期：{{ weatherInfo.week }}</view>
			<view class="weather-detail">最高温：{{ weatherInfo.high }}</view>
			<view class="weather-detail">最低温：{{ weatherInfo.low }}</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				weatherInfo: null, 
			}
		},
		methods: {
			getWeather() {
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success-----" + JSON.stringify(res));
						if (res.statusCode === 200 && res.data.status === 200) {
							const tomorrow = res.data.data.forecast[0];
							this.weatherInfo = {
								ymd: tomorrow.ymd,
								week: tomorrow.week,
								high: tomorrow.high,
								low: tomorrow.low 
							};
						}
					},
				});
			}
		}
	}
</script>
<style scoped>
	.page-container {
		padding: 30rpx;
	}
	.weather-btn {
		background-color: aquamarine;
		color: white;
		padding: 15rpx 0;
		border-radius: 9rpx;
		margin-bottom: 15rpx;
	}
	.weather-card {
		background-color: blanchedalmond;
		padding: 15rpx;
		border-radius: 9rpx;
	}
	.weather-detail {
		line-height: 1.8;
		font-size: 20rpx;
	}
</style>